<template>
  <div class="app-container">
    <el-row type="flex" justify="center">
      <el-col :span="1">
        <div class="grid-content" />
      </el-col>
    </el-row>
    <el-row type="flex" justify="center">
      <el-col :span="18.5" class="card1">
        <el-card class="box-card" shadow="never" style="height: 50vh">
          <template #header>
            <div class="card-header">
              <span>第{{ state.idForm.pro_id }}题{{ " 题目类型： " + state.idForm.mold_description }}</span>
            </div>
          </template>
          <div>{{ state.idForm.pro_description }}</div>
          <el-row type="flex" justify="center" />

          <el-row type="flex" justify="center" />
          <el-button class="box-card" shadow="hover" plain @click="state.answerChange(state.idForm.answer_a)"
            >A:{{ state.idForm.option_a }}</el-button
          >
          <el-row type="flex" justify="center" />
          <el-button class="box-card" shadow="hover" plain @click="state.answerChange(state.idForm.answer_b)"
            >B:{{ state.idForm.option_b }}</el-button
          >
        </el-card>

        <div style="margin: 0 auto">
          <el-divider />
          <el-row type="flex" justify="center">
            <!---->
            <el-form-item class="mb-4">
              <el-button :disabled="state.able" type="primary" plain @click="state.getNextProblem()">{{
                state.buttonText
              }}</el-button>
            </el-form-item>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from "vue"
import { useProblemStore } from "@/store/modules/problem"
import { useTestStore } from "@/store/modules/test"
import { dayjs, ElMessage, ElMessageBox } from "element-plus"
import { useUserStore } from "@/store/modules/user"

interface IFindProblemForm {
  pro_id: string
  pro_description: string
  option_a: string
  option_b: string
  mold_description: string
  answer_a: string
  answer_b: string
}
const now = new Date()
const state = reactive({
  idForm: {
    pro_id: "1",
    pro_description: "当你要外出一整天，你会",
    option_a: " 计划你要做什么和在什么时候做",
    option_b: "说去就去",
    mold_description: "哪一个答案最能贴切的描绘你一般的感受或行为？",
    answer_a: "J",
    answer_b: "P"
  } as IFindProblemForm,
  E: ref<number>(0),
  I: ref<number>(0),
  S: ref<number>(0),
  N: ref<number>(0),
  T: ref<number>(0),
  F: ref<number>(0),
  J: ref<number>(0),
  P: ref<number>(0),
  buttonText: ref<string>("下一题"),
  c_group: ref<string>(),
  isSelect: ref<boolean>(false),
  able: ref<boolean>(false),
  result: ref<string>(""),
  getNextProblem: () => {
    if (!state.isSelect) {
      ElMessage.error("请选择你的答案.")
      return
    }
    state.addResult()
    state.able = false
    if (Number(state.idForm.pro_id) == 93) {
      state.getResult()
      console.log(state.result)
      useTestStore().getTest({
        username: useUserStore().username,
        date: dayjs(now).format("YYYY-MM-DD"),
        answer: state.result
      })
      ElMessageBox.alert("你的测试结果为" + state.result, "测试结果出来了！！", {
        confirmButtonText: "OK",
        callback: () => {
          ElMessage({
            type: "success",
            message: `测试完成!!`
          })
        }
      })
      state.able = true
    } else {
      useProblemStore()
        .getProblem({
          pro_id: String(Number(state.idForm.pro_id) + 1)
        })
        .then(() => {
          state.idForm.pro_id = String(Number(state.idForm.pro_id) + 1)
          state.idForm.pro_description = useProblemStore().pro_description
          state.idForm.option_a = useProblemStore().option_a
          state.idForm.option_b = useProblemStore().option_b
          state.idForm.mold_description = useProblemStore().mold_description
          state.idForm.answer_a = useProblemStore().answer_a
          state.idForm.answer_b = useProblemStore().answer_b
          if (state.idForm.pro_id == "93") {
            state.buttonText = "提交"
          }
        })
    }
  },

  answerChange(a_group: string) {
    state.isSelect = true
    state.c_group = a_group
  },
  addResult() {
    console.log("add")
    if (state.c_group == "E") {
      state.E = state.E + 1
      console.log("E:" + state.E)
    } else if (state.c_group == "I") {
      state.I = state.I + 1
      console.log("I:" + state.I)
    } else if (state.c_group == "S") {
      state.S = state.S + 1
      console.log("S:" + state.S)
    } else if (state.c_group == "N") {
      state.N = state.N + 1
      console.log("N:" + state.N)
    } else if (state.c_group == "T") {
      state.T = state.T + 1
      console.log("T:" + state.T)
    } else if (state.c_group == "F") {
      state.F = state.F + 1
      console.log("F:" + state.F)
    } else if (state.c_group == "J") {
      state.J = state.J + 1
      console.log("J:" + state.J)
    } else if (state.c_group == "P") {
      state.P = state.P + 1
      console.log("P:" + state.P)
    }
  },
  getResult() {
    if (state.I >= state.E) {
      state.result = state.result + "I"
    } else {
      state.result = state.result + "E"
    }
    if (state.N >= state.S) {
      state.result = state.result + "N"
    } else {
      state.result = state.result + "S"
    }
    if (state.F >= state.T) {
      state.result = state.result + "F"
    } else {
      state.result = state.result + "T"
    }
    if (state.P >= state.J) {
      state.result = state.result + "P"
    } else {
      state.result = state.result + "J"
    }
  }
})
</script>

<style>
.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: left;
  height: 80px;
  margin: 10px;
  text-align: left;
  border-radius: 15px;
  padding: 15px 25px 15px 25px;
  background: var(--el-color-primary-light-9);
  background-color: rgb(37, 69, 87);
  color: rgb(255, 255, 255);
}

.item-text {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 20px;
  width: 550px;
  text-align: left;
  border-radius: 15px;
  padding: 15px 25px 15px 25px;
  background: var(--el-color-primary-light-9);
  background-color: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
  font-size: 30px;
}

.item-botton2 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  margin: 20px;
  text-align: center;
  border-radius: 15px;
  padding: 15px 25px 15px 25px;
  font-size: 30px;
}

.hh1 {
  text-align: center;
  color: deepskyblue;
}

.el-row {
  margin-bottom: 50px;
}

.grid-content {
  border-radius: 4px;
  min-height: 5px;
  min-width: 100px;

  text-align: center;
}

.card1 {
  height: 80vh;
  width: 1100px;
  border-radius: 30px;
}
</style>
